<template>
  <div>
    <subAttribute v-if="current" :attributes="current.attributes" @update="updateAttribute" />
  </div>
</template>
<script>
import mount from '@/components/mount.js'
import { getTemplate } from '@/components/template'
import subAttribute from './subAttribute'
// 深度合并
import mergeDeep from '@/utils/mergeDeep'
export default {
  name: 'attributes',
  data() {
    return {}
  },
  computed: {
    current: {
      //当前选中组件
      get(value) {
        return this.$store.state.currentComponent
      },
    },
    attr: {
      //当前选中组件
      get(value) {
        return this.$store.state.attr
      },
    },
  },
  methods: {
    updateAttribute(attr, id, slotTag) {
      debugger
      // 这里有2套逻辑，一套是正常的修改样式，一套是拖拽提供了样式的组件，然后给拖拽组件即刻添加样式
      //属性值输入事件
      let components = JSON.parse(JSON.stringify(this.$store.state.components))
      // console.log(components,'组件====================')
      let index
      if (id) {
        index = components.findIndex((component) => component.info.id === id)
      } else {
        index = components.findIndex((component) => component.info.id === this.current.info.id)
      }

      let current = components[index]

      let info = current.info

      attr = mergeDeep(current.attributes, attr)
      if (components[index].slot) {
        //对于嵌入组件 需要传入slot 才会在模板上带上slot属性
        attr.slot = components[index].slot
      }
      let component = getTemplate(info, attr, components[index].slots, slotTag), //更新模板
        attributes = component.attributes
        console.log('更新后的组件属性=====',component.attributes)
      //getTemplate中可能修改了components，所以重新获取
      components = JSON.parse(JSON.stringify(this.$store.state.components))
      index = components.findIndex((component) => component.info.id === current.info.id)

      Object.assign(components[index]['attributes'], attributes) //更新从getTemplate获取到的最新属性
      components[index]['slots'] = component.slots
      components[index].template = component.template
      // console.log('储存组件=====',components)
      this.$store.commit('setState', {
        components,
      })
      this.$store.commit('setState', {
        currentComponent: components[index],
      })

      //更新数据到vuex完毕

      //下面触发视图层变化
      if (!components[index].parentId) {
        mount(component.info.id, component, this)
      } else {
        //对于嵌套组件，更新其顶级父组件
        let topComponent = this.getParentComponent(components[index])
        // 这里的对父组件进行更新，然后把更新后的数据合并到旧的父组件，再更新到组件库
        Object.assign(topComponent, getTemplate(topComponent.info, topComponent.attributes, topComponent.slots))
        let i = components.findIndex((c) => c.info.id === topComponent.info.id)
        components[i] = topComponent
        this.$store.commit('setState', {
          components,
        })

        mount(topComponent.info.id, topComponent, this)
      }

      //有数据更新操作，就删除之前被删除的备份。只提供撤销删除的撤销功能
      this.$store.commit('setState', { backupComponents: [] })
    },
    getParentComponent(component) {
      let components = JSON.parse(JSON.stringify(this.$store.state.components))
      if (component.parentId) {
        return this.getParentComponent(components.find((c) => c.info.id === component.parentId))
      } else {
        return component
      }
    },
  },
  components: {
    subAttribute,
  },
  mounted() {
    this.$EventBus.$on('getAttr', (obj) => {
      // console.log('悬浮组件发送来的属性=====',obj, this.$store.state.newComponentId)
      if (obj) {
        this.updateAttribute(obj.attr, this.$store.state.newComponentId, obj.slotTag)
      }
    })
  },
}
</script>
